<template>
    <drawer-table
            title="选择角色"
            width="50%"
            :visible="visible"
            row-key="id"
            style="margin-bottom: 24px"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="pagination"
            @change="onChange"
            @close="onClose"
            :visibleTable="isAdd"
    >
        <slot slot="search">
            <div :class="advanced ? 'search' : null">
                <a-form layout="horizontal">
                    <div :class="advanced ? null: 'fold'">
                        <a-row >
                            <a-col :md="8" :sm="24" >
                                <a-form-item
                                        label="ID"
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 18, offset: 1}"
                                        style="margin-right: 10px"
                                >
                                    <a-input v-model="query.id" placeholder="请输入"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24" >
                                <a-form-item
                                        label="角色标识符"
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 18, offset: 1}"
                                        style="margin-right: 10px"
                                >
                                    <a-input v-model="query.identifier" placeholder="请输入"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24" >
                                <a-form-item
                                        label="角色名"
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 18, offset: 1}"
                                        style="margin-right: 10px"
                                >
                                    <a-input v-model="query.name" placeholder="请输入"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </div>
                    <span style="float: right; margin-top: 3px;">
                      <a-button type="primary" @click="loadData">查询</a-button>
                      <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                      <a @click="toggleAdvanced" style="margin-left: 8px">
                        {{advanced ? '收起' : '展开'}}
                        <a-icon :type="advanced ? 'up' : 'down'" />
                      </a>
                    </span>
                </a-form>
            </div>
        </slot>


        <div slot="action" slot-scope="{text, record}">
            <div v-if="isAdd == true">
                <a style="margin-right: 8px" @click="selectedRows(record)">
                    <a-icon type="edit"/>选择
                </a>
            </div>
        </div>
        <div slot="drawerSlot">
            <a-form>
                <a-form-item
                        label="ID"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input v-model="id" disabled/>
                </a-form-item>
                <a-form-item
                        label="角色id"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input v-model="form.roleId" disabled/>
                </a-form-item>
                <a-form-item
                        label="用户id"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input v-model="form.userId" disabled/>
                </a-form-item>
                <a-form-item
                        label="描述"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                        :validate-status="validate.info.pass? '':'error'"
                        :help="validate.info.pass? '':validate.info.help"

                >
                    <a-textarea rows="4" v-model="form.info"/>
                </a-form-item>

                <a-form-item
                        label="创建时间"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input v-model="form.createTime" disabled/>
                </a-form-item>
                <a-form-item
                        label="更新时间"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input v-model="form.updateTime" disabled/>
                </a-form-item>

                <a-form-item style="margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
                    <a-button type="primary" @click="handleSubmit">提交</a-button>
                </a-form-item>
            </a-form>
        </div>
    </drawer-table>
</template>

<script>
    import {roleService, userRoleService} from "@/services";
    import {roleColumns} from "@/columns";
    import DrawerTable from "@/components/drawer/DrawerTable";
    import validate from '@/utils/validate';
    import verifyConfig from './verifyConfig';

    const columns = roleColumns;

    const dataSource = []

    export default {
        name: 'UserRoleRoleDrawer',
        props: {
            visible: {
                type: [Object, Boolean],
                default: false
            },
            id: {
                type: [String],
            },
            roleId: {
                type: [String]
            },
            userId: {
                type: [String]
            },
            isAdd: {
                type: [Object, Boolean],
                default: true
            }
        },
        components: {DrawerTable},
        data () {
            return {
                advanced: true,
                columns: columns,
                pagination:{
                    current:1,
                    pageSize:10,
                    total:0
                }, // 分页器

                dataSource: dataSource,
                query:{
                    id:'',
                    identifier:'',
                    name:'',
                    current: 1,
                    size: 10
                },// 查询参数

                // 提交表单
                form: {
                    id: '',
                    roleId:'',
                    userId:this.userId,
                    info:'',
                    createTime:'',
                    updateTime:'',
                },

                /*校验器*/
                validate:{
                    id: {},
                    roleId:{},
                    userId:{},
                    info:{
                        pass: true
                    },
                    createTime:{},
                    updateTime:{},
                },
            }
        },
        /*authorize: {
            deleteRecord: 'delete'
        },*/
        async created() {
            await this.loadData();
            await this.loadOtherData();
        },
        methods: {
            verify() {
                const result = validate.verifying(this.form,verifyConfig,this.validate);
                return result;
            },


            async loadData() {
                /*构建请求参数*/
                this.query.current = this.pagination.current;
                this.query.size = this.pagination.pageSize;

                /*请求接口*/
                const result = await roleService.page(this.query);
                this.dataSource = result.data.records;

                /*刷新分页信息*/
                this.pagination.current = result.data.current;
                this.pagination.pageSize = result.data.size;
                this.pagination.total = result.data.total;
            },

            async loadUpdateData() {
                const result = await userRoleService.getById({id: this.id});
                this.form = result.data;
                console.log(result);
            },

            // 加载其他数据
            loadOtherData() {

            },


            reset() {
                this.query.id = '';
                this.query.identifier = '';
                this.query.name = '';
                this.loadData();
            },
            resetForm() {
                this.form.roleId = '';
                this.form.info = '';
            },

            toggleAdvanced () {
                this.advanced = !this.advanced
            },

            onChange(pagination) {
                this.pagination = pagination;
                this.loadData();
            },
            onClose() {
                this.$emit('close');
            },
            selectedRows(record) {
                this.form.roleId = record.id;
            },
            async handleSubmit() {
                // 校验表单
                if (!this.verify()) {
                    return;
                }
                if (this.isAdd) {
                    const result = await  userRoleService.save(this.form);
                    if (result.code == 201) {
                        this.$message.success('添加成功');
                        this.$emit('change');
                        this.$emit('close');
                    } else {
                        this.$message.error('添加失败');
                    }
                } else {
                    const result = await  userRoleService.edit(this.form);
                    if (result.code == 201) {
                        this.$message.success('修改成功');
                        this.$emit('change');
                        this.$emit('close');
                    } else {
                        this.$message.error('修改失败');
                    }
                }

            },

        },
        watch: {
            id: function(val) {
                this.form.id = val;
                this.loadUpdateData();
            },
            visible: function(val) {
                if (!val&&this.isAdd) {
                    this.reset();
                    this.resetForm();
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .search{
        margin-bottom: 54px;
    }
    .fold{
        width: calc(100% - 216px);
        display: inline-block
    }
    .operator{
        margin-bottom: 18px;
    }
    @media screen and (max-width: 900px) {
        .fold {
            width: 100%;
        }
    }
</style>